<template>
  <a-drawer
      title="申请单详情"
      placement="right"
      :open="props.visible"
      width="75%"
      class="requirement-detail-drawer"
      style="background:rgba(237,237,237,0)"
      @close="onClose"
      :closable="false"
  >
    <div class="requirement-panel">
      <div class="requirement-panel-item">
        <div class="department-selector">
          <Selector1
              class="department-select"
              modalName="部门"
              apiPath="/department"
              :apiParams="dpmApiParams"
              masterValue="-"
              :isDisabled="isDisabled"
              :optionField="dpmOptionField"
              :external-field="dpmExternalField"
              :external-data="requirementDetails.department"
              ref="dpmRef"
          />
        </div>
        <div class="role-selector">
          <Selector1
              class="role-select"
              modalName="角色"
              apiPath="/role/dtoDepartmentRole"
              :apiParams="roleApiParams"
              :masterValue="dpmRef?.selectorInfo?.desc"
              :isDisabled="isDisabled"
              :optionField="roleOptionField"
              :external-field="roleExternalField"
              :external-data="requirementDetails.role"
              ref="roleRef"
          />
        </div>
        <div class="business-selector">
          <Selector1
              class="business-select"
              modalName="业务"
              apiPath="/business/dtoRoleCase"
              :apiParams="businessApiParams"
              :masterValue="roleRef?.selectorInfo?.desc"
              :isDisabled="isDisabled"
              :optionField="businessOptionField"
              :external-field="businessExternalField"
              :external-data="requirementDetails.business"
              ref="businessRef"
          />
        </div>
      </div>

      <div class="requirement-panel-item">
        <div class="fail-mode-panel">
          <div class="title-sub">
            痛点
            <a-button
                v-if="!isDisabled"
                type="dashed"
                size="small"
                class="add-btn"
                @click="addFailMode(requirementDetails.dtoFailMode4requirementList)"
            >
              <PlusOutlined />
              添加痛点
            </a-button>
          </div>
          <div class="fail-mode-list">
            <div v-for="(failMode, index) in requirementDetails.dtoFailMode4requirementList" :key="index" class="fail-mode-item">
              <Selector1
                  class="fail-mode-select"
                  :class="{ 'expanded': expandIndex === index }"
                  modalName="痛点"
                  apiPath="/failMode"
                  :apiParams="fmApiParams"
                  :masterValue="businessRef?.selectorInfo?.entity?.roleCaseId"
                  :isDisabled="isDisabled"
                  :optionField="fmOptionField"
                  :external-field="fmExternalField"
                  :external-data="failMode"
                  :ref="failMode?.ref"
                  @click="expandFailMode(index)"
              />
              <a-button
                  v-if="!isDisabled && requirementDetails.dtoFailMode4requirementList.length > 1"
                  type="text"
                  danger
                  class="delete-btn"
                  @click.stop="removeFailMode(requirementDetails.dtoFailMode4requirementList,index)"
              >
                <DeleteOutlined />
              </a-button>
            </div>
          </div>
        </div>
        <div class="ctrl-plan-panel">
          <div class="title-sub">
            控制计划
            <a-button
                v-if="!isDisabled && fmFocus"
                type="dashed"
                size="small"
                class="add-btn"
                @click="addCtrlPlan(fmFocus.ctrlPlans)"
            >
              <PlusOutlined />
              添加控制计划
            </a-button>
          </div>
          <div class="ctrl-plan-list">
            <div class="field-name">
              <div class="field-label1">控制要求</div>
              <div class="field-label2">容量</div>
              <div class="field-label3">时机</div>
              <div class="field-label4">反应计划</div>
            </div>
            <div class="ctrl-plan-item"
                 v-if="fmFocus"
                 v-for="(ctrlPlan, ctrlIndex) in fmFocus.ctrlPlans" 
                 :key="ctrlIndex">
              <div class="ctrl-plan-content">
                <div class="ctrl-plan-field-spec">
                  <Selector1
                      class="ctrl-plan-select"
                      modalName="控制规格/要求"
                      apiPath="/ctrlPlan"
                      :apiParams="cpApiParams"
                      :masterValue="fmFlag"
                      :isDisabled="isDisabled"
                      :optionField="cpOptionField"
                      :external-field="cpExternalField"
                      :external-data="ctrlPlan"
                      :ref="ctrlPlan?.ref"
                  />
                </div>
                <div class="ctrl-plan-field-capacity">
                  <Selector1
                      class="ctrl-plan-select"
                      modalName="容量"
                      apiPath="/ctrlPlan/cpCapacity"
                      :apiParams="capacityApiParams"
                      :masterValue="fmFlag"
                      :isDisabled="isDisabled"
                      :optionField="capacityOptionField"
                      :external-field="capacityExternalField"
                      :external-data="ctrlPlan"
                  />
                </div>
                <div class="ctrl-plan-field-frequency">
                  <Selector3
                      class="ctrl-plan-select"
                      modalName="时机"
                      apiPath="/ctrlPlan/cpFrequency"
                      :apiParams="fqApiParams"
                      :masterValue="fmFlag"
                      :isDisabled="isDisabled"
                      :optionField="fqOptionField"
                      :external-field="fqExternalField"
                      :external-data="ctrlPlan.frequencyList"
                  />
                </div>
                <div class="ctrl-plan-field-reactionPlan">
                  <Selector3
                      class="ctrl-plan-select"
                      modalName="反应计划"
                      apiPath="/reactionPlan"
                      :apiParams="rpApiParams"
                      :masterValue="fmFlag"
                      :isDisabled="isDisabled"
                      :optionField="rpOptionField"
                      :external-field="rpExternalField"
                      :external-data="ctrlPlan.reactionPlanList"
                  />
                </div>
              </div>

              <a-button
                  v-if="!isDisabled && fmFocus.ctrlPlans.length > 1"
                  type="text"
                  danger
                  class="delete-btn"
                  @click="removeCtrlPlan(fmFocus.ctrlPlans, ctrlIndex)"
              >
                <DeleteOutlined />
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <div class="requirement-panel-item" style="background: rgba(15, 23, 42, 0.01);">
        <div class="value-box">
          <div class="title-sub">价值主张</div>
          <a-textarea
              v-model:value="requirementDetails.value"
              placeholder="请输入价值主张描述"
              :auto-size="{ minRows: 3, maxRows: 6 }"
              class="value-input"
              :disabled="isDisabled"
              :readonly="isDisabled"
          />
        </div>
      </div>

      <div class="requirement-panel-item" >
        <div class="btn-panel">
          <a-button class="save-btn"
                    type="primary"
                    @click="handleSave"
                    :loading="saving"
                    v-if="!isDisabled"
          >
            <SaveOutlined />
            保存
          </a-button>
          <a-button class="edit-btn"
                    type="primary"
                    @click="handleEdit"
                    v-if="isDisabled"
          >
            <EditOutlined />
            编辑
          </a-button>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

// 在 DetailDrawer.vue 的 script 部分替换为：
<script setup lang="ts">
import {computed, ref, watch} from "vue";
import { Button, Drawer, Textarea } from "ant-design-vue";
import { DeleteOutlined, PlusOutlined, SaveOutlined,EditOutlined } from "@ant-design/icons-vue";

import {
  saving,
  requirementDetails,
  handleSave,
  initializeFromRecord,
  resetRequirementDetails,
} from './detailService.ts';
import Selector1 from "./Selector1.vue";
import Selector3 from "./Selector3.vue";
import {addFailMode, expandFailMode, expandIndex, removeFailMode} from "./failModeService.ts";
import {addCtrlPlan, removeCtrlPlan} from "./ctrlPlanService.ts";

const ADrawer = Drawer;
const ATextarea = Textarea;
const AButton = Button;

interface Props {
  mode?: 'add' | 'preview';
  record?: any;
  visible?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'preview',
  record: null,
  visible: false,
});

const localMode = ref(props.mode);

const dpmApiParams=ref({
  searchKey: 'nameCn',
  masterKey: 'NA',
});
const dpmOptionField=ref({
  key: 'id',
  value: 'nameCn',
});
const dpmExternalField=ref({
  key: 'id',
  value: 'nameCn',
});
const dpmRef=ref();

const roleApiParams=ref({
  searchKey: 'name',
  masterKey: 'dpmNameCn',
});
const roleOptionField=ref({
  key: 'id',
  value: 'name',
});
const roleExternalField=ref({
  key: 'id',
  value: 'nameCn',
});
const roleRef=ref();

const businessApiParams=ref({
  searchKey: 'name',
  masterKey: 'roleName',
});
const businessOptionField=ref({
  key: 'id',
  value: 'name',
});
const businessExternalField=ref({
  key: 'id',
  value: 'name',
});
const businessRef=ref();

const fmApiParams=ref({
  searchKey: 'modeDesc',
  masterKey: 'roleCaseId',
});
const fmOptionField=ref({
  key: 'id',
  value: 'modeDesc',
});
const fmExternalField=ref({
  key: 'fmId',
  value: 'fmDesc',
});

const cpApiParams=ref({
  searchKey: 'spec',
  masterKey: 'failModeId',
});
const cpOptionField=ref({
  key: 'id',
  value: 'spec',
});
const cpExternalField=ref({
  key: 'cpId',
  value: 'cpSpec',
});

const capacityApiParams=ref({
  searchKey: 'NA',
  masterKey: 'NA',
});
const capacityOptionField=ref({
  key: 'id',
  value: 'cnDesc',
});
const capacityExternalField=ref({
  key: 'capacityId',
  value: 'capacityCn',
});

const fqApiParams=ref({
  searchKey: 'NA',
  masterKey: 'NA',
});
const fqOptionField=ref({
  key: 'id',
  value: 'cnDesc',
});
const fqExternalField=ref({
  key: 'id',
  value: 'cnDesc',
});

const rpApiParams=ref({
  searchKey: 'NA',
  masterKey: 'NA',
});
const rpOptionField=ref({
  key: 'id',
  value: 'cnDesc',
});
const rpExternalField=ref({
  key: 'id',
  value: 'cnDesc',
});

const fmFocus = computed(() => {
  const list = requirementDetails.value.dtoFailMode4requirementList;
  if (list && list[expandIndex.value]) {
    return list[expandIndex.value];
  }
});

const fmFlag= computed(() => {
  if(fmFocus.value?.fmId){
    return fmFocus.value?.fmId;
  }else{
    if(fmFocus.value?.fmDesc){
      return -1;
    }
    return undefined;
  }
});

const emit = defineEmits<{
  close: [];
}>();

const onClose = async () => {
  resetRequirementDetails();
  expandIndex.value=0;
  emit('close');
};

// 计算属性
const isDisabled = computed(() => {
  return localMode.value === 'preview';
});

const handleEdit = () => {
  localMode.value = 'add'; // 切换到编辑模式
};

// 监听记录变化，初始化数据
watch(() => props.record, (newRecord) => {
  if (newRecord) {
    initializeFromRecord(newRecord, props.mode);
  }
}, { immediate: true });

</script>

<style scoped>
.requirement-detail-drawer{
  display: flex;
  .delete-btn:hover{
    color: #0ea5e9;
    background: repeating-radial-gradient(
        circle at 50%,
        rgba(14, 165, 233, 0.7),
        rgba(14, 165, 233, 0.05) 40%,
        rgba(14, 165, 233, 0.01) 100%);
    border-color: rgba(14, 165, 233, 0.00);
  }
  .delete-btn{
    color: #3b82f6;
  }
  .add-btn{
    margin-left: 20px;
  }
  .requirement-panel{
    display: flex;
    flex-direction: column;
    width: 100%;
    .requirement-panel-item>*{
      flex: 1;
      padding: 10px;
    }
    .requirement-panel-item>*>*{
      width: 100%;
    }
    .requirement-panel-item{
      display: flex;
      width: 100%;

      ::v-deep(.ant-select-arrow),
      ::v-deep(.ant-select-selection-placeholder),
      ::v-deep(.ant-select-open .ant-select-selection-item),
      ::v-deep(.ant-input)::-webkit-input-placeholder {
        color: #808385 !important;
        opacity: 0.7;
      }
      ::v-deep(.ant-input),
      ::v-deep(.ant-select-selector) {
        background: rgba(15, 23, 42, 0.7) !important;
        border: 1px solid #334155 !important;
        border-radius: 8px !important;
        color: #f1f5f9 !important;
        transition: all 0.3s ease;
      }
      ::v-deep(.ant-select-selection-item) {
        background: rgba(15, 23, 42, 0) !important;
        border: 0 !important;
        color: #f1f5f9 !important;
      }
      ::v-deep(.ant-input:hover),
      ::v-deep(.ant-select-selector:hover) {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
      }
      ::v-deep(.new-selector-item .ant-select-selector) {
        border: 1px solid #eab308 !important;
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2) !important;
      }
      ::v-deep(.expanded.new-selector-item .ant-select-selector) {
        background: rgba(75, 250, 66, 0.05) !important;
        border: 1px solid #eab308 !important;
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2) !important;
      }
      ::v-deep(.ant-btn-dashed) {
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
        background: rgba(59, 130, 246, 0.1) !important;
      }
      ::v-deep(.ant-btn-dashed:hover) {
        border-color: #0ea5e9 !important;
        color: #0ea5e9 !important;
        background: rgba(14, 165, 233, 0.15) !important;
      }
      .fail-mode-panel{
        .fail-mode-list{
          background: rgba(200, 200, 200, 0.05);
          .fail-mode-item::before {
            content: '●';
            position: relative;
            left: -10px;
            top: 5px;
            color: #3b82f6;
            font-size: 12px;
            opacity: 0.7;
          }
          .fail-mode-item {
            display: flex;
            padding: 5px;
            flex-direction: row;
            .fail-mode-select{
              flex: 1;
              min-width: 70%;
            }
            .expanded {
              background: rgba(75, 250, 66, 0.20) !important;
            }
          }
        }
      }
      .ctrl-plan-panel{
        display: flex;
        flex: 2;
        flex-direction: column;
        .ctrl-plan-list{
          background: rgba(200, 200, 200, 0.05);
          width: 100%;
          .field-name>*{
            display: flex;
            justify-content: center;
          }
          .field-name{
            display: flex;
            flex-direction: row;
            margin-top: 10px;
            .field-label1{flex: 4;}
            .field-label2{flex: 1;}
            .field-label3{flex: 2;}
            .field-label4{flex: 2;}
          }

          ::v-deep(.ant-input),
          ::v-deep(.ant-select-selector) {
            background: rgba(75, 250, 66, 0.05) !important;
          }

          .ctrl-plan-item{
            display: flex;
            flex-direction: row;
            width: 100%;
            .ctrl-plan-content{
              display: flex;
              flex-direction: row;
              width: 100%;
              min-width: 80%;
              .ctrl-plan-field-spec,
              .ctrl-plan-field-capacity,
              .ctrl-plan-field-frequency,
              .ctrl-plan-field-reactionPlan{
                display: flex;
                flex-direction: column;
              }
              .ctrl-plan-field-spec{
                flex: 4;
              }
              .ctrl-plan-field-capacity{
                flex: 1;
              }
              .ctrl-plan-field-frequency{
                flex: 2;
              }
              .ctrl-plan-field-reactionPlan{
                flex: 2;
              }
            }
          }
        }
      }
      .value-box{
        .value-input:hover {
          border-color: #3b82f6 !important;
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
        }
        .value-input {
          background: rgba(15, 23, 42, 0.7) !important;
          border: 1px solid #334155 !important;
          border-radius: 8px !important;
          color: #f1f5f9 !important;
          transition: all 0.3s ease;
        }
      }
      .btn-panel {
        display: flex;
        background: rgba(15, 23, 42, 0.1) !important;
        .edit-btn,
        .save-btn {
          width: 100px;
          border-radius: 8px;
          font-weight: 500;
          transition: all 0.3s ease;
          height: 40px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          gap: 6px;
          border: none;
          position: relative;
          overflow: hidden;
          background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
          color: white;
          box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
        }
        .edit-btn::before,
        .save-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: 0.5s;
        }
        .edit-btn:hover::before,
        .save-btn:hover::before {
          left: 100%;
        }
        .edit-btn:hover,
        .save-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
        }
      }
    }
  }
}
</style>
<style>
.requirement-detail-drawer {
  .ant-drawer-wrapper-body {
    .ant-drawer-header {
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%) !important;
      padding: 0;
      .ant-drawer-header-title .ant-drawer-title {
        color: rgba(255, 255, 255, 0.9);
        margin: 6px 0 6px 20px;
        font-size: 20px;
      }
    }
    .ant-drawer-header::before {
      content: '';
      position: absolute;
      top: -5%;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("/akitorSys.svg");
      background-size: 100% 120%;
      opacity: 0.3;
    }
    .ant-drawer-body {
      background: linear-gradient(135deg, rgba(28, 32, 46, 0.95) 0%, #1e293b 100%) !important;
      color: white;
    }
  }
}
</style>
